<template>
  <div class="header-detail">
    <h2>{{ heritage.name }}</h2>
    <div style="display: flex">
      <div class="heritage-basic">
        <el-card shadow="hover">
          <div style="display: flex;align-items: center">
            <el-image
                style="width: 50px;height: 45px;background-color: #747bff;border-radius: 50%;"
                :src="heritage.categoryImage"
                fit="contain"
            />
            <el-tag type="success" size="large" effect="dark" style="margin-left: 5px">{{ heritage.categoryName }}</el-tag>
          </div>
        </el-card>
        <el-card shadow="hover">
          <span>所属地区：</span>
          <el-tag size="large" effect="dark">{{ heritage.address }}</el-tag>
        </el-card>
        <el-card shadow="hover">
          <span>热度：</span>
          <el-tag type="danger" size="large" effect="dark">{{ heritage.accessTotal }}</el-tag>
        </el-card>
        <el-card shadow="hover">
          <span>公布时间：</span>
          <el-tag type="warning" size="large" effect="dark">{{ heritage.createTime }}</el-tag>
        </el-card>
      </div>
      <div style="display: flex;" v-show="adVisible">
        <el-image style="width: 100%;height: 210px;margin-left: 50px" src="../../public/ad/heritage7.png" alt="广告"/>
        <span style="margin-top: 40%;border: 1px solid skyblue;width: 20px;height: 58px">
          广告
          <el-icon style="cursor: pointer" @click="adVisible = false"><Close /></el-icon>
        </span>
      </div>
    </div>
  </div>
  <div class="desc-detail">
    <h2>描述</h2>
    <el-input
        v-model="heritage.description"
        rows="10"
        type="textarea"
        disabled
        style="font-size: 20px"
    />
  </div>
  <div class="address-detail">
    <h2>所属地区</h2>
    <div id="container" style="height: 60vh;border: 1px solid greenyellow;"></div>
  </div>
</template>

<script setup>
import {ref,getCurrentInstance} from 'vue'
import {BMPGL} from "../util/bmpgl.js";
import baiduMap from '../util/server.js'
import {useRoute} from "vue-router";
import {useHeritageStore} from "../store/useHeritageStore.js";

const {proxy} = getCurrentInstance()
const useHeritage = useHeritageStore()
const route = useRoute()
const heritage = ref({})
const adVisible = ref(true)
const heritageLat = ref(0)
const heritageLon = ref(0)


//根据id查询非遗详细信息
const searchHeritageById = () => {
  proxy.request.get('/api/heritage/queryHeritageById',{
    params:{
      id:route.params.id
    }
  }).then(res => {
    //对经纬度做处理
    function locationHandle() {
      let arr = res.data.location.split(',')
      heritageLat.value = Number(arr[0])
      heritageLon.value = Number(arr[1])
    }

    if (res.code === '1'){
      if (res.data.location.includes('error')){
        res.data.location = "102.54,31.26"
        locationHandle();
      }
      heritage.value =res.data
      locationHandle();
    }
  })
}
searchHeritageById()
const initMap = () => {
  BMPGL(baiduMap.akMap).then(() => {
    // 创建地图实例
    let map = new BMapGL.Map("container");
    // 创建点坐标 axios => res 获取的初始化定位坐标
    let point = new BMapGL.Point(heritageLon.value, heritageLat.value);
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(point, 15);
    //开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true)
    //声明控件并添加到地图中
    let scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    let zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    let cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
    map.addControl(cityCtrl);
    let locationCtrl = new BMapGL.LocationControl(); // 定位
    map.addControl(locationCtrl)
    //添加覆盖物
    let marker = new BMapGL.Marker(point);
    map.addOverlay(marker);
  })
}
//初始化地图
initMap()

</script>

<style lang="less" scoped>
.el-icon:hover{
  color: red;
}
.desc-detail {
  height: 350px;
}

.header-detail {
  .heritage-basic {
    .el-card {
      .el-tag {
        font-size: 15px;
      }
      width: 250px;
      height: 80px;
      margin: 10px 20px 0 15px;
    }

    width: 56%;
    height: 200px;
    background-color: #eee;
    margin-top: 10px;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
  }

  height: 250px;
}
</style>